<template>
  <div>
    <Row class="bench_search">
      <Col span="6">
      <span>设备名称: </span>
      <Input v-model="searchList.equip_name" clearable style="width: 70%;"></Input>
      </Col>
      <Col span="6">
      <span>设备编码: </span>
      <Input v-model="searchList.equip_coding" clearable style="width: 70%;"></Input>
      </Col>
      <Col span="6">
      <span>设备类型: </span>
      <Input v-model="searchList.equip_type" clearable style="width: 70%;"></Input>
      </Col>
      <Col span="6">
      <Button type="primary" @click="onSearch" class="new-btn-sty1">查询</Button>
      </Col>
    </Row>

    <Table :columns="column" :data="tableData.results" :height="offsetHeight" border :loading="loading">
      <template slot-scope=" { row }" slot="action">
        <Button type="primary" size="small" @click="info(row)" style="margin-right: 5px">基本信息</Button>
        <Button type="info" size="small" @click="supplierInfo(row)">供应商信息</Button>
      </template>
    </Table>
    <Row type="flex" justify="end">
      <Page :total="tableData.total" show-sizer @on-change="pageNoChange" @on-page-size-change="pageSizeChange" />
    </Row>
    <Modal v-model="show" title="设备信息" width="50">
      <info @cancel="cancel" @init="init" :form-list="formList" :switch="loginName === formList.login_name"></info>
      <div slot="footer"></div>
    </Modal>
    <Drawer v-model="supplierShow" title="故障信息" width="50">
      <supplier @cancel="cancel" :form-list="formList" :switch="loginName === formList.login_name"></supplier>
      <div slot="footer"></div>
    </Drawer>
  </div>
</template>
<script>
import { devicePageList } from '@/api/device'
import { getUserInfo } from '@/api/user'
import Info from '../components/info.vue'
import Supplier from './supplier.vue'
export default {
  name: 'DeciveManage',
  components: {
    Info,
    Supplier
  },
  props: {

  },
  data () {
    return {
      loginName: '',
      offsetHeight: document.documentElement.clientHeight - 310,
      loading: false,
      saveLoading: false,
      searchList: {},
      tableData: {},
      pageNo: 1,
      pageSize: 10,
      column: [
        {
          title: '设备名称',
          key: 'equip_name',
          align: 'center'
        },
        {
          title: '规格型号',
          key: 'equip_model',
          align: 'center'
        },
        {
          title: '设备编码',
          key: 'equip_coding',
          align: 'center'
        }, {
          title: '设备类型',
          key: 'equip_type',
          align: 'center'
        },
        {
          title: '设备标识',
          key: 'equip_signboard',
          align: 'center'
        },
        {
          title: '功率',
          key: 'equip_power',
          align: 'center'
        },
        {
          title: '生产厂商',
          key: 'equip_firm',
          align: 'center'
        },
        {
          title: '供应商名称',
          key: 'equip_supplier',
          align: 'center'
        },
        {
          title: '供应商电话',
          key: 'equip_supplier_tel',
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'create_time',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: 250,
          align: 'center'
        }
      ],
      show: false,
      formList: {},
      supplierShow: false
    }
  },
  created () {

  },
  mounted () {
    this.userInfo()
    this.init()
  },
  methods: {
    userInfo () {
      getUserInfo({}).then(res => {
        let data = res.data.data
        if (data) {
          this.loginName = data.loginName
        } else {
          this.$Message.error({
            content: res.data.errmsg
          })
        }
      })
    },
    init () {
      this.loading = true
      devicePageList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        ...this.searchList
      }).then(res => {
        let data = res.data.data
        if (data) {
          this.tableData = data
          this.loading = false
        } else {
          this.loading = false
          this.$Message.error({
            content: res.data.errmsg
          })
        }
      })
    },
    onSearch () {
      this.pageNo = 1
      this.pageSize = 10
      this.init()
    },
    add () {
      this.formList = {}
      this.show = true
    },
    info (item) {
      this.formList = { ...item }
      this.show = true
    },
    supplierInfo (item) {
      this.formList = {
        id: item.id,
        login_name: item.login_name,
        equip_supplier: item.equip_supplier,
        equip_supplier_tel: item.equip_supplier_tel
      }
      this.supplierShow = true
    },
    cancel () {
      this.show = false
      this.supplierShow = false
    },
    pageNoChange (pageNo) {
      this.pageNo = pageNo
      this.init()
    },
    pageSizeChange (pageSize) {
      this.pageSize = pageSize
      this.init()
    }
  },
  computed: {

  }
}
</script>
<style lang="less" scoped>
.bench_search {
  margin: 0px 10px 5px;
}
.new-btn-sty {
  margin-right: 5px;
  color: #fff;
  background-color: #235ca7;
  border-color: #235ca7;
  font-weight: 500;
}
.new-btn-sty1 {
  margin-right: 5px;
  color: #fff;
  background-color: #598ed1;
  border-color: #598ed1;
  font-weight: 500;
}
.new-btn-sty2 {
  margin-right: 5px;
  color: #fff;
  background-color: #14a507;
  border-color: #14a507;
  font-weight: 500;
}
</style>